From b403ff2b139de724d9d4f656f1cae8933f7ad2f1 Mon Sep 17 00:00:00 2001 From: Factiven Date: Fri, 28 Apr 2023 01:48:47 +0700 Subject: Editor List v0.1 --- pages/anime/[...id].js | 93 ++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 82 insertions(+), 11 deletions(-) (limited to 'pages/anime/[...id].js') diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index cf70c62..43b6ca9 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -15,8 +15,11 @@ import { useEffect, useState } from "react"; import Layout from "../../components/layout"; import Link from "next/link"; import Content from "../../components/hero/content"; +import Modal from "../../components/modal"; -import { useSession } from "next-auth/react"; +import { signIn, useSession } from "next-auth/react"; +import AniList from "../../components/media/aniList"; +import ListEditor from "../../components/listEditor"; const query = ` query ($username: String, $status: MediaListStatus) { @@ -137,22 +140,35 @@ const infoQuery = `query ($id: Int) { } }`; +const stats = [ + "Watching", + "Plan to Watch", + "Completed", + "Dropped", + "Paused", + "Rewatching", +]; + export default function Info() { const { data: session, status } = useSession(); const [data, setData] = useState(null); const [info, setInfo] = useState(null); const [episode, setEpisode] = useState(null); const [loading, setLoading] = useState(false); - const [progress, setProgress] = useState(null); + const [progress, setProgress] = useState(0); const [statuses, setStatuses] = useState(null); const [stall, setStall] = useState(false); const [color, setColor] = useState(null); const [showAll, setShowAll] = useState(false); + const [open, setOpen] = useState(false); const [time, setTime] = useState(0); const { id } = useRouter().query; + const [aniStatus, setAniStatus] = useState(statuses); + const [aniProgress, setAniProgress] = useState(0); + const rec = info?.recommendations?.nodes.map( (data) => data.mediaRecommendation ); @@ -262,18 +278,25 @@ export default function Info() { if (gut) { setProgress(gut?.progress); + setAniProgress(parseInt(gut?.progress)); if (gut.status === "CURRENT") { setStatuses("Watching"); + setAniStatus("Watching"); } else if (gut.status === "PLANNING") { setStatuses("Planned to watch"); + setAniStatus("Planned to watch"); } else if (gut.status === "COMPLETED") { setStatuses("Completed"); + setAniStatus("Completed"); } else if (gut.status === "DROPPED") { setStatuses("Dropped"); + setAniStatus("Dropped"); } else if (gut.status === "PAUSED") { setStatuses("Paused"); + setAniStatus("Paused"); } else if (gut.status === "REPEATING") { setStatuses("Rewatching"); + setAniStatus("Rewatching"); } } } @@ -297,6 +320,28 @@ export default function Info() { fetchData(); }, [id, session?.user?.name]); + function handleOpen() { + setOpen(true); + document.body.style.overflow = "hidden"; + } + + function handleClose() { + setOpen(false); + document.body.style.overflow = "auto"; + } + + function handleSubmit(e) { + e.preventDefault(); + const formData = { status: aniStatus, progress: aniProgress }; + console.log(formData); + } + + function handleProgress(e) { + setAniProgress(e.target.value); + } + + // console.log(progress); + return ( <> @@ -306,6 +351,37 @@ export default function Info() { : "Retrieving Data..."} + handleClose()}> +
+ {!session && ( +
+

+ Edit your list +

+ +
+ )} + {session && info && progress && ( + + )} +
+
@@ -362,7 +438,10 @@ export default function Info() { {info && (
-
+
handleOpen()} + > {statuses ? statuses : "Add to List"}
@@ -465,14 +544,6 @@ export default function Info() { > Sub | EN
- {info && info.nextAiringEpisode && ( -
- Ep {info.nextAiringEpisode.episode}: {time} -
- )}
) : ( -- cgit v1.2.3